<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../utils/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-focus>
    </div>
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

    <script>
        // 全局自定义指令注册
        /* Vue.directive('focus', {
            // 当被绑定的元素插入到DOM中时
            inserted(el) {
                // 聚焦元素
                el.focus()
            }
        }) */

        Vue.directive('demo', {
            bind(el, binding, vnode) {
                var s = JSON.stringify;
                el.innerHTML = 
                    'name: ' + s(binding.name) + '<br>' +
                    'value: '  + s(binding.value) + '<br>' +
                    'expression: ' + s(binding.expression) + '<br>' + 
                    'argument: ' + s(binding.arg) + '<br>' +
                    'modifiers: ' + s(binding.modifiers) + '<br>' +
                    'vnode keys: ' + Object.keys(vnode).join(", ")
            }
        })
        /* name: "demo"
        value: "hello!"
        expression: "message"
        argument: "foo"
        modifiers: {"a":true,"b":true}
        vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder */

        var app = new Vue({
            el: '#app',
            // 局部自定义指令注册
            directives: {
                focus: {
                    inserted(el) {
                        el.focus()
                    }
                }
            }
        })

        new Vue({
            el: "#hook-arguments-example",
            data: {
                message: 'hello!'
            }
        })
    </script>
</body>
</html>